<template>
    <div id="sTeam">
        <div class="courses" v-for="(course,index) in courses" >
            <el-row  v-bind:class="{coursesRow:course.selected=true}"  >
                <el-col :span="4" style="text-align:center"><div @click="showHistory(index)">1</div></el-col>
                <el-col :span="5" @click="showHistory(index)"><div @click="showHistory(index)">{{course.num}}</div></el-col>
                <el-col :span="15" @click="showHistory(index)"><div @click="showHistory(index)">{{course.name}}</div></el-col>
            </el-row>
<!--                <div  style="width:10%" @click="showHistory(index)">1</div>
                <div  style="width:20%" @click="showHistory(index)">{{course.num}}</div>
                <div  style="width:50%;" @click="showHistory(index)">{{course.name}}</div>
-->           <div ref="item" class="courseHistory" style="display:none;width:100%;">
                    <ul class="historyTask">
                        <li v-for="(tsk,index2) in course.tsks">
                            <span  style="font-size:1px;color:#cfcfcf;">NO.</span><span style="font-weight:bolder;font-size:15px;padding-left:0px">{{index2+1}}</span>
                            <span style="padding-left:2%">{{tsk.name}}</span>
                            <span style="padding-left:15%">
                                分数
                                <span style="color:red;padding-left:2%;">
                                    {{tsk.score}}
                                </span>
                            </span>
                        </li>
                    </ul>
                </div>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                members:[
                    {
                        name:"黄宋杰",
                    },
                    {
                        name:"黄宋杰",
                    },
                    {
                        name:"黄宋杰",
                    },
                    {
                        name:"黄宋杰",
                    },
                    {
                        name:"黄宋杰",
                    },
                ],



                courses:[]

            }
        },
        methods:{
            change(data){
                console.log(data)
                this.courses=data;
            },
            open5() {
        this.$prompt('输入被邀方的学号', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          /*inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,*/
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '已经向 ' + value+'  发出邀请，等待对方确认。',
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
             showHistory(index){
                console.log(this.courses[index].selected,this.courses[index].name,)
                 for( var i =0;i<this.$refs.item.length;i++){
                 }
                 if(this.$refs.item[index].style.display=="none"){
                     this.$refs.item[index].style.display="block";
                     console.log(this.$refs.item[index].style)
                 }else{
                     this.$refs.item[index].style.display="none";
                 }
             }
         }
    }
</script>
<style>
    #sTeam{
        padding-top: 5px;
    }
    #sTeam .courses {
        font-size: 1.25vw;
        /*background: red;*/
        /*height: 30px;*/
        padding:0.7vw 0 0.7vw 0;
        border-bottom: 1px solid #ccc
    }
    #sTeam .historyTask li{
        color: #767676;
        padding-left: 5%;
        font-size: 14px;
        padding:0.2vw 0 0.2vw 8%;

    }
    .el-button--primary{
        background-color:#454545;
    }
</style>
